<template>
    <div id="app">
        <div class="table-wraper">
            <div class="search">
                <div class="selectOption">
                    <el-input v-model="checkName" placeholder="按推广渠道名称检索"></el-input>
                    <el-button type="primary" @click='check(1)'>检索</el-button>
                    <el-button type="success" class='checkBtn' @click="openAppendBox">添加推广渠道</el-button>
                </div>
            </div>
            <div class="table">
                <ul class="listTitle">
                    <li v-for='item in listTitle'>{{item.label}}</li>
                </ul>
                <ul class="dataList" v-for='(item,index) in tableData'>
                    <li>{{index+1}}</li>
                    <li @click='openInfoDialog(index)'>{{item.opeName}}</li>
                    <li>{{item.opeAbb}}</li>
                    <li>{{item.inactivite}}</li>
                    <li>{{item.opeHttp}}</li>
                    <li>{{item.createDate | formatDate}}</li>
                    <li>
                        <el-button type="info" @click='openEdit(index)'>编辑</el-button>
                        <el-button type="danger" @click='OpenDelete(index)'>删除</el-button>
                    </li>
                </ul>
            </div>
            <div class="block pagination" v-show='nullContentPagination'>
                <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="10" layout="prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
            <div class="nullContent" v-show='nullContent'>暂无数据</div>
        </div>
        <el-dialog v-model="dialogVisible" size="tiny">
            <h2>新建推广渠道</h2>
            <el-input v-model="channelName" placeholder="请输入渠道名称"></el-input>
            <el-input v-model="channelCode" placeholder="请输入Code值"></el-input>
            <el-input v-model="channelAddress" :disabled="true"></el-input>
            <span slot="footer" class="dialog-footer">
                 <el-button type="primary" @click="addChannel">确 定</el-button>            
                 <el-button @click="cancelEdit">取 消</el-button>
              </span>
        </el-dialog>
        <el-dialog v-model="dialogVisibleEdit" size="tiny">
            <h2>修改推广渠道</h2>
            <span>渠道名称</span>
            <el-input v-model="channelNameEdit" placeholder="请输入渠道名称"></el-input>
            <span>Code</span>
            <el-input v-model="channelCodeEdit" :disabled="true"></el-input>
            <span>总邀请人数</span>
            <el-input v-model="channelInviteEdit" :disabled="true"></el-input>
            <span>创建时间</span>
            <el-input v-model="channelCreateTimeEdit" :disabled="true"></el-input>
            <span>地址</span>
            <el-input v-model="channelAddressEdit" :disabled="true"></el-input>
            <span slot="footer" class="dialog-footer">
                 <el-button type="primary" @click="editChannel">确 定</el-button>            
                 <el-button @click="cancelEdit">取 消</el-button>
              </span>
        </el-dialog>

            <div class="bomb infoDialog" v-show='isInfoDialog'>
            <div class="bomb_header">
                <p>推广渠道</p>
                <span @click="hideInfoDialog">
                            <img src="../../assets/images/icon_tanc_close@2x.png" width="10px" height="10">
                            </span>
            </div>
            <div class="bomb_content">
                <section class="showBox">
                <p><span>名称 ： </span>
                    <el-input v-model="dialogName" :disabled='true'></el-input>
                </p>
                <p><span>Code ： </span>
                    <el-input v-model="dialogCode" :disabled='true'></el-input>
                </p>
                <p><span>总邀请人数 ： </span>
                    <el-input v-model="dialogInvite" :disabled='true'></el-input>
                </p>
                <p><span>创建时间 ： </span>
                    <el-input v-model="dialogCreateTime" :disabled='true'></el-input>
                </p>
                <p><span>地址 ： </span>
                    <el-input v-model="dialogAddress" :disabled='true'></el-input>
                </p>
            </section>
            <section class="charts">
                <div id="charts"></div>
            </section>
            <el-date-picker v-model="startTime" type="date" :editable='false' placeholder="选择日期" :picker-options="pickerOptions1"></el-date-picker> 至
            <el-date-picker v-model="endTime" type="date" :editable='false' placeholder="选择日期" :picker-options="pickerOptions1"></el-date-picker>
            <el-button type="info" @click='checkCharts'>检索</el-button>
            </div>
        </div>
        <div class="layer" v-show='layer'></div>
    </div>
</template>
<script src="/static/js/china.js">

</script>
<script>
    let echarts = require('echarts');
    import {
        mapActions,
        mapState
    } from 'vuex'
    export default {
        data() {
            return {
                tableData: [],
                userDetial: [],
                listTitle: this.$store.state.channelManage.listTitle,
                chartsOption: this.$store.state.channelManage.chartsOption,
                currentPage: 1,
                total: 0,
                layer: false,
                dialogVisible: false,
                dialogVisibleEdit: false,
                nullContent: false,
                nullContentPagination: true,
                isInfoDialog: false,
                channelName: '',
                channelCode: '',
                channelAddress: 'http://192.168.1.216:3030/double/invite/index.html?invitedCode=',
                channelNameEdit: '',
                channelCodeEdit: '',
                channelInviteEdit: '',
                channelCreateTimeEdit: '',
                channelAddressEdit: '',
                checkName: '',
                editId: '',
                currentType: '',
                dialogName: '',
                dialogCode: '',
                dialogInvite: '',
                dialogCreateTime: '',
                dialogAddress: '',
                startTime: '',
                endTime: '',
                userId: '',
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
            }
        },
        watch: {
            channelCode: function(val) {
                this.channelAddress = 'http://192.168.1.216:3030/double/invite/index.html?invitedCode=' + val;
            }
        },
        methods: {
            // 获取推广渠道列表
            getChannel(i) {
                this.$store.commit('showLoading');
                this.currentType = 1;
                this.currentPage = i;
                this.tableData = [];
                let list = {
                    token: sessionStorage.token,
                    pageNo: i,
                    pageSize: 10
                }
                this.getChannelList(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    this.total = data.data.count;
                    if (data.code === 200) {
                        if (data.data.list.length == 0) {
                            this.nullContent = true;
                            this.nullContentPagination = false;
                            this.tableData = data.data.list;
                            return;
                        }
                        this.tableData = data.data.list;
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg));
            },
            // 删除渠道操作
            OpenDelete(i) {
                this.$confirm('此操作将永久删除该条推广渠道, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteChannel(i);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 删除渠道
            deleteChannel(i) {
                let id = this.tableData[i].id;
                this.$store.commit('showLoading');
                this.deleteChannelData(id).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code === 200) {
                        this.$message.success('删除成功!');
                    } else {
                        this.$message(data.message);
                    }
                    this.getChannel(1);
                }).catch(msg => console.log(msg));
            },
            openAppendBox() {
                this.dialogVisible = true;
            },
            cancelEdit() {
                this.dialogVisible = this.dialogVisibleEdit = false;
            },
            // 添加推广渠道
            addChannel() {
                let list = {
                    token: sessionStorage.token,
                    opeAbb: this.channelCode,
                    opeName: this.channelName,
                    opeHttp: this.channelAddress
                }
                this.$store.commit('showLoading');
                this.addChannelData(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code === 200) {
                        this.$message.success('添加成功!');
                    } else {
                        this.$message(data.message);
                    }
                    this.getChannel(1);
                    this.cancelEdit();
                    this.channelName = this.channelCode = '';
                }).catch(msg => console.log(msg));
            },
            // 修改推广渠道
            openEdit(i) {
                this.dialogVisibleEdit = true;
                this.editId = this.tableData[i].id;
                this.channelNameEdit = this.tableData[i].opeName;
                this.channelCodeEdit = this.tableData[i].opeAbb;
                this.channelInviteEdit = this.tableData[i].inactivite;
                this.channelCreateTimeEdit = this.formatDate(this.tableData[i].createDate);
                this.channelAddressEdit = this.tableData[i].opeHttp;
            },
            // 修改推广渠道
            editChannel() {
                let list = {
                    token: sessionStorage.token,
                    id: this.editId,
                    opeName: this.channelNameEdit
                }
                this.$store.commit('showLoading');
                this.editChannelData(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code === 200) {
                        this.$message.success('修改成功!');
                    } else {
                        this.$message(data.message);
                    }
                    this.getChannel(1);
                    this.cancelEdit();
                }).catch(msg => console.log(msg));
            },
            // 检索推广渠道
            check(i) {
                this.currentType = 2;
                if (this.checkName == '') {
                    this.$message.warning('请输入渠道名称!');
                }
                let list = {
                    token: sessionStorage.token,
                    pageNo: i,
                    pageSize: 10,
                    jsonFilter: {}
                };
                if (this.checkName != '') {
                    list.jsonFilter.opeName = this.checkName;
                }
                list.jsonFilter = JSON.stringify(list.jsonFilter);
                this.$store.commit('showLoading');
                this.getChannelList(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    this.total = data.data.count;
                    if (data.code === 200) {
                        if (data.data.list.length == 0) {
                            this.nullContent = true;
                            this.nullContentPagination = false;
                            this.tableData = data.data.list;
                            return;
                        }
                        this.tableData = data.data.list;
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg));
            },
            // 获取渠道表格数据
            getCharts() {
                let list = {
                    token: sessionStorage.token,
                    parentId: this.userId,
                    createDate: this.UnFormatDate(this.startTime),
                    endCreateDate: this.UnFormatDate(this.endTime),
                }
                this.checkChannelData(list).then((data) => {
                    console.log(data);
                    let dataList = data.data;
                    if (data.code === 200) {
                        this.chartsOption.xAxis[0].data = dataList.XData;
                        this.chartsOption.series[0].data = dataList.Data;
                        this.drawPie('charts')
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg));
            },
            // 打开推广渠道图表
            openInfoDialog(i) {
                this.layer = this.isInfoDialog = true;
                this.dialogName = this.tableData[i].opeName;
                this.dialogCode = this.tableData[i].opeAbb;
                this.dialogInvite = this.tableData[i].inactivite;
                this.dialogCreateTime = this.formatDate(this.tableData[i].createDate);
                this.dialogAddress = this.tableData[i].opeHttp;
                this.startTime = this.GMTFormatDate(this.tableData[i].createDate);
                this.endTime = new Date();
                this.userId = this.tableData[i].id;
                this.getCharts();
            },
            hideInfoDialog() {
                this.layer = this.isInfoDialog = false;
            },
            // 画表
            drawPie(id) {
                var charts = echarts.init(document.getElementById(id));
                charts.setOption(this.chartsOption);
            },
            // 根据时间检索表格
            checkCharts() {
                if (this.startTime != '' && this.endTime != ''&&this.startTime!=undefined&&this.endTime!=undefined) {
                    let start = Date.parse(new Date(this.startTime)),
                    end = Date.parse(new Date(this.endTime));
                    if(start>end){
                        this.$message.warning('开始时间不能大于结束时间！');
                        return
                    }else{
                        this.getCharts();
                    }
                }
            },
            // 分页
            handleCurrentChange(val) {
                if (this.currentType == 1) {
                    this.getChannel(val)
                } else {
                    this.check(val);
                }
            },
            // GTM格式转换
            GMTFormatDate(date) {
                return new Date(date);
            },
            // 请求格式化日期
            UnFormatDate(date) {
                return new Date(date).toLocaleString().split(' ')[0];
            },
            // 格式化日期
            formatDate(date) {
                let y, m, d, h, i, s,
                    t = new Date(parseInt(date));
                y = t.getFullYear()
                m = t.getMonth() + 1
                d = t.getDate()
                h = t.getHours()
                i = t.getMinutes()
                s = t.getSeconds()
                return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s)
            },
            ...mapActions(['getChannelList', 'addChannelData', 'editChannelData', 'deleteChannelData', 'checkChannelData'])
        },
        created: function() {
            this.getChannel(1);
        },
        filters: {
            // 格式化日期
            formatDate(date) {
                let y, m, d, h, i, s,
                    t = new Date(parseInt(date));
                y = t.getFullYear()
                m = t.getMonth() + 1
                d = t.getDate()
                h = t.getHours()
                i = t.getMinutes()
                s = t.getSeconds()
                return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s)
            },
            // 请求格式化日期
            UnFormatDate(date) {
                return new Date(date).toLocaleString().split(' ')[0].replace(/\//g, '-');
            }
        },
        mounted: function() {
            this.$nextTick(function() {
                this.drawPie('charts')
            })
        }
    }
</script>

<style scoped>
    #app {
        position: relative;
    }
    ul,
    h2 {
        margin: 0;
    }
    h2 {
        padding: 10px 0 20px 0;
        color: rgb(109, 148, 189);
        font-weight: bold;
        font-size: 20px;
    }
    .table-wraper {
        width: 100%;
        background-color: #fff;
        border-radius: 5px;
    }
    .el-table {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }

    .listTitle li:last-child,
    .dataList li:last-child {
        border-right: none;
    }
    .listTitle li:nth-child(1),
    .dataList li:nth-child(1) {
        width: 4%;
    }
    .listTitle li:nth-child(2),
    .dataList li:nth-child(2) {
        width: 12%;
    }
    .dataList li:nth-child(2) {
        padding-left: 8px;
    }
    .listTitle li:nth-child(3),
    .dataList li:nth-child(3) {
        width: 15%;
    }
    .listTitle li:nth-child(4),
    .dataList li:nth-child(4) {
        width: 10%;
    }
    .listTitle li:nth-child(5),
    .dataList li:nth-child(5) {
        width: 29%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding: 0 5px;
    }
    .listTitle li:nth-child(6),
    .dataList li:nth-child(6) {
        width: 14%;
    }
    .listTitle li:nth-child(7),
    .dataList li:nth-child(7) {
        width: 16%;
    }
    .dataList li:nth-child(2) {
        color: #35C885;
        cursor: pointer;
    }

    .el-input {
        width:200px;
    }

   
    .infoDialog {
        width: 700px;
        height: 623px;
    }
    .infoDialog .bomb_content{
        height:575px;
        border:none;
    }
    .infoDialog .bomb_content p{
        text-align: right;
        padding-right: 15%;
    }
    .infoDialogBtn {
        position: absolute;
        top: 16px;
        right: 30px;
        padding: 8px;
    }
    .showBox {
        width: 100%;
        padding: 10px 0 0;
    }
    .showBox span {
        font-size: 17px;
    }
    .showBox .el-input {
        width: 70%;
    }
    .charts {
        height: 280px;
        width: 100%;
    }
    #charts {
        width: 100%;
        height: 280px;
    }
    .search {
        width: 100%;
        padding: 6px 20px 0 0;
        background-color: #efefef;
        height: 48px;
        margin-bottom: 10px
    }
    .checkBtn {
        width: 96px;
    }
    .el-dialog__wrapper .el-input{
        width:100%;
        margin:0 0 10px 0;
    }
</style>
